{extend name="base" /}
{block name="css"}
<link rel="stylesheet" media="screen" href="{__CSS__}/css/login.css?v={:rand_number()}"/>
{/block}
{block name="body"}
{include file="common/header" /}
<style type="text/css">

     
.notClick{
height:40px; pointer-events: none
 } /*禁止重复点击发送邮件*/
</style>
           
   <style>
    #submitBtn {
      background-color: gray;
    }

    #submitBtn.enabled {
      background-color: red;
    }
    #submitBtn1 {
      background-color: gray;
    }

    #submitBtn1.enabled {
      background-color: red;
    }
  </style>          
 
<div class="loginwrapper">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title layui-select-none">
    <li class="layui-this">{:__('Email retrieval')}</li>
    <li>{:__('SMS retrieval')}</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      
<div class="login-wrapper">
      
    <form id="email-form" class="layui-form" method="POST" action="" onsubmit="return false;">
        <div class="layui-form-item layui-input-icon-group layui-select-none">
                <input type="radio" name="uid" value="2" title=" {:__('Sina email')}" checked>
                <input type="radio" name="uid" value="3" title="{:__('Enterprise mailbox')}">
                <input type="radio" name="uid" value="4" title="{:__('QQ')}">
                </div>
         <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-email"></i>
            <input type="text" class="layui-input" name="email" id="email" placeholder="{:__('Please input email')}" autocomplete="off"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input type="text" class="layui-input" id="code" name="code" placeholder="{:__('Please enter the verification code')}" autocomplete="off"/>
            <botton style="background-color:rgba(0,0,0,0.2)" id="return_email" lay-filter="retrieve_send" lay-submit class="login-captcha" />{:__('Click send')}</botton>
        </div>
       <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input type="text" class="layui-input" name="password" id="password" placeholder="{:__('Please enter the login password')}" type="password"/>
        </div>
        <div class="layui-form-item">
            <button type="submit" class="layui-btn layui-btn-fluid" lay-filter="retrieve_email" lay-submit id="submitBtn" disabled>{:__('Submit for verification')}</button>
        </div>
    </form>
</div>
</div>
    <div class="layui-tab-item">

<div class="login-wrapper">
       <form id="mobile-form" class="layui-form" method="POST" action="" onsubmit="return false;">
        <input type="hidden" name="uid" value="1" id="uid">
                <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-cellphone"></i>
            <input class="layui-input" name="mobile" id="mobile" placeholder="{:__('Please input mobile phone number')}" autocomplete="off"
                   lay-verType="tips" lay-verify="required" required/>
        </div>

                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input class="layui-input" id="code1" name="code1" placeholder="{:__('Please enter the verification code')}" autocomplete="off" />
            <botton style="background-color:rgba(0,0,0,0.2)" id="return_mobile"lay-filter="retrieve_mobile_send" lay-submit class="login-captcha" />{:__('Click send')}</botton>
        </div>
                <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" name="pass" id="pass" placeholder="{:__('Please enter the login password')}" type="password" />
        </div>
        
                
        <div class="layui-form-item">
           <button type="button" class="layui-btn layui-btn-fluid" lay-filter="retrieve_mobile" lay-submit id="submitBtn1" disabled>{:__('Submit for verification')}</button>
        </div>
        
    </form>
      </div>  
    </div>
  </div>
</div> 
</div>  
 
{/block}   
{block name="js"}
  <script>
    const mobile = document.getElementById('mobile');
    const code1 = document.getElementById('code1');
    const pass = document.getElementById('pass');
    const submitBtn1 = document.getElementById('submitBtn1');

    mobile.addEventListener('input', checkInputs);
    code1.addEventListener('input', checkInputs);
    pass.addEventListener('input', checkInputs);

    function checkInputs() {
      if (mobile.value && code1.value && pass.value) {
        submitBtn1.disabled = false; 
        submitBtn1.classList.add('enabled');
      } else {
        submitBtn1.classList.remove('enabled');
        submitBtn1.disabled = true;
      }
    }
  </script>
  <script>
    const email = document.getElementById('email');
    const code = document.getElementById('code');
    const password = document.getElementById('password');
    const submitBtn = document.getElementById('submitBtn');

    email.addEventListener('input', checkInputs);
    code.addEventListener('input', checkInputs);
    password.addEventListener('input', checkInputs);

    function checkInputs() {
      if (email.value && code.value && password.value) { 
        submitBtn.disabled = false; 
        submitBtn.classList.add('enabled');
      } else {
        submitBtn.classList.remove('enabled');
        submitBtn.disabled = true;
      }
    }
  </script>
<script>
      layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
        //表单提交
    form.on('submit(retrieve_send)', function (data) {
                //清空input
                $("input[name='code']").val("").focus();
                $("input[name='password']").val("").focus();
   var index = layer.msg('<i>{:__('Sending, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });
    $.ajax({
         url: "{:url('user/emailPwd')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
            //$('input[name="code"]').val(result.captcha);
           // layer.msg('发送成功', {icon: 1});
                setTimeout(function () {
                     if(isNaN(parseInt($("#return_email").html()))){
                        var origText  = '60';
                        var interval = setInterval(function(){
                            var time = --origText;
                            if(time <= 0) {
                                clearInterval(interval);
                              $('#return_email').html('{:__('Resend')}').css('border','none').css('color','#000').css('background-color','rgba(0,0,0,0.2)').removeClass("notClick");
                            }else{
                                $('#return_email').html(time+'&nbsp;&nbsp;{:__('second')}').css('background-color','rgba(0,0,0,0.2)').css('color','#ff2222').addClass('notClick');
                            
                        }
                        }, 1000);
                   // parent.location.reload();
                   }
                }, 1000);

            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
form.on('submit(retrieve_email)', function (data) {
    var index = layer.msg('<i>{:__('Verification in progress, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });

    $.ajax({
        url: "{:url('user/emailcheck')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});


    form.on('submit(retrieve_mobile_send)', function (data) {
                //清空input
                $("input[name='code1']").val("").focus();
                $("input[name='pass']").val("").focus();
   var index = layer.msg('<i>{:__('Sending, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });
    $.ajax({
         url: "{:url('user/smspwd')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
            //$('input[name="code"]').val(result.captcha);
                setTimeout(function () {
                     if(isNaN(parseInt($("#return_mobile").html()))){
                        var origText  = '60';
                        var interval = setInterval(function(){
                            var time = --origText;
                            if(time <= 0) {
                                clearInterval(interval);
                                $('#return_mobile').html('{:__('Resend')}').css('border','none').css('color','#000').css('background-color','rgba(0,0,0,0.2)').removeClass("notClick");
                            }else{
                                $('#return_mobile').html(time+'&nbsp;&nbsp;{:__('second')}').css('background-color','rgba(0,0,0,0.2)').css('color','#ff2222').addClass('notClick');
                            
                        }
                        }, 1000);
                   // parent.location.reload();
                   }
                }, 1000);

            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
form.on('submit(retrieve_mobile)', function (data) {
    var index = layer.msg('<i>{:__('Verification in progress, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });

    $.ajax({
        url: "{:url('user/mobilecheck')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});

});
</script>
{/block}